<!DOCTYPE html>
<html>
<head>
    <title>视频编辑</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<style>

</style>
<div class="panel panel-default" id="rrapp" v-cloak>
    <div class="panel-heading">视频标题：{{bVideoInfo.articleTitle}}</div>

    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">分享链接</div>
            <div class="col-sm-10">
                <input class="form-control" placeholder="抖抖分享链接" id="douDouShareLink" value="" style="float: left;width: 80%;margin-right: 5%;"/>
                <input type="button" class="btn btn-primary" @click="createrInfo" value="生成"/>

<!--                <input @click="saveInfo" type="button" value="保存" class="btn btn-primary"-->
<!--                       style="background-color: rgb(0, 150, 136); border-color: rgb(0, 150, 136); color: rgb(255, 255, 255);">-->
<!--                <input onclick="window.close();" type="button" value="返回" class="btn btn-primary"-->
<!--                       style="background-color: rgb(240, 173, 78); border-color: rgb(240, 173, 78); color: rgb(255, 255, 255);">-->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">选择品牌</div>
            <div class="col-sm-10">
                <div id="selectBrandNameList">

                </div>
                <input class="form-control" list="allBrandNames" placeholder="品牌" id="selectBrandName">
                <datalist id="allBrandNames" style="line-height: 10px">

                </datalist>
                <input type="button" onclick="addBrandName()" value="添加"/>
            </div>
        </div>
        <script>
            function genID() {
                return Math.floor(Math.random() * (999999 - 100000)) + 100000;
            }

            /*add品牌*/
            function addBrandName() {
                var selectBrandName = $("#selectBrandName").val();

                if (selectBrandName.trim() == '') {
                    alert('请选择品牌');
                    return false;
                }

                var len = $(".pArticleTypeName").length;
                if (len == 5) {
                    alert('最多可以添加5个品牌');
                    return false;
                }

                if ($(".pArticleTypeName[value='" + selectBrandName + "']").length > 0) {
                    alert('品牌已存在');
                    return false;
                }

                var index = genID(6);//获取6位随机ID
                $("#selectBrandNameList").append(
                    "<p class='pArticleTypeName' id='pBrandName" + index + "' value='" + selectBrandName + "'>" + selectBrandName + "&nbsp;<a href='javascript:void(0);' onclick='delBrand(" + index + ")'>删除</a></p>");
                $("#selectBrandName").val("");
            }

            function delBrand(pId) {
                $("#pBrandName" + pId).remove();
            }
        </script>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">分类</div>
            <div class="col-sm-10">
                <input class="form-control" list="editTypeNames" placeholder="分类" id="articleTypeName">
                <datalist id="editTypeNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">视频标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.articleTitle" id="articleTitle"
                       name="articleTitle" placeholder="视频标题"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">封面图片</div>
            <div class="col-sm-10">
                <img id="articleImgUrl" width="100px" height="100px"/>
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file" accept="image/*" class="form-control" id='uploadImg' onchange="inserttx(this,'ps')"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">视频文件</div>
            <div class="col-sm-10">
                <!--<img id="videoImgUrl" width="100px" height="100px" />-->
                <!--<img width="200px" height="200px" id="img"/>-->
                <video id="videoUrl" width="200px" height="200px" controls="controls">
                    您的浏览器不支持 video 标签。
                </video>
                <input type="file" accept="video/mp4,audio/mp4" class="form-control" id='uploadVideo'
                       onchange="inserttx(this,'video')"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">视频高度</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.videoHeight" id="videoHeight"
                       name="videoHeight" placeholder="视频高度(px)"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">摘要</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.articleContent" id="articleContent"
                       name="articleContent" placeholder="摘要"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">分享配文</div>
            <div class="col-sm-10">
                <!--    <input type="text" class="form-control" v-model="bVideoInfo.articleDesc" id="articleDesc" name="articleDesc" placeholder="分享配文"/>-->
                <textarea cols="25" rows="10" class="form-control" v-model="bVideoInfo.articleDesc"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">显示类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input checked type="radio" name="articleVersionNum" value="2" v-model="bVideoInfo.articleVersionNum"  /> 常规
                </label>
                <label class="radio-inline">
                    <input type="radio" name="articleVersionNum" value="0" v-model="bVideoInfo.articleVersionNum" /> 大图
                </label>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">热度类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="0" v-model="bVideoInfo.hotType"/> 随机
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="1" v-model="bVideoInfo.hotType"/> 自定义
                </label>
                <input type="text" class="form-control" v-model="bVideoInfo.articleHotScore" id="articleHotScore"
                       name="articleHotScore" placeholder="热度值"/>
            </div>
        </div>

        <div class="form-group">
            <!--<script id="editor" type="text/plain" style="width:1024px;"></script>-->
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">头条标题</div>
            <div class="col-sm-10">
                <div id="headlineTitle">

                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input @click="saveInfo" type="button" value="保存" class="btn btn-primary"
               style="background-color: rgb(0, 150, 136); border-color: rgb(0, 150, 136); color: rgb(255, 255, 255);">
            <input onclick="window.close();" type="button" value="返回" class="btn btn-primary"
               style="background-color: rgb(240, 173, 78); border-color: rgb(240, 173, 78); color: rgb(255, 255, 255);">
        </div>
    </form>
</div>
<script>

    $(function () {

        $.ajax({
            type: "POST",
            async: false,
            url: baseURL + 'sys/bvideoinfo/HeadlineTitle',
            contentType: "application/json",
            success: function (r) {

                if (r.code == 0) {
                    for (var i = 0; i < r.titles.length; i++) {
                        $("#headlineTitle").append(
                            " <input type='checkbox' id='html" + i + "' value='" + r.titles[i].id + "' name='a' onclick='checkboxOnclick()'/>" +
                            " <label for='html" + i + "'>" + r.titles[i].gzhName + ":" + r.titles[i].headlineName + "</label><br/>"
                        )
                    }
                }
            }
        });

        $.ajax({
            type: "POST",
            async: false,
            url: baseURL + 'sys/bbrandinfo/queryAll',
            contentType: "application/json",
            success: function (r) {
                if (r.code == 0) {
                    vm.bbrandinfo = r.brandInfo;
                    for (var i = 0; i < r.brandInfo.length; i++) {
                        $("#allBrandNames").append(
                            "<option value=" + r.brandInfo[i].brandName + ">" + "</option>");
                    }
                }
            }
        });

        $.ajax({
            type: "POST",
            async: false,
            url: baseURL + 'sys/barticletypeinfo/queryAll',
            contentType: "application/json",
            success: function (r) {
                if (r.code == 0) {
                    //vm.bbrandinfo=r.brandInfo;
                    for (var i = 0; i < r.barticletypeinfo.length; i++) {
                        $("#editTypeNames").append(
                            "<option value=" + r.barticletypeinfo[i].articleTypeName + ">" + "</option>");
                    }
                }
            }
        });

        var url = location.search;
        var videoId = url.split("=")[1];
        if (videoId != 0) {
            loadData(videoId);
        }

    })

    function checkboxOnclick() {
        text = $("input:checkbox[name='a']:checked").map(function (index, elem) {
            return $(elem).val();
        }).get().join(',');
        // alert("选中的checkbox的值为："+text);
        vm.bVideoInfo.headlineTitleIds = text
        console.log(text)
    }

    function loadData(e) {
        console.log("e:" + e);
        $.get(baseURL + "sys/bvideoinfo/info/" + e, function (r) {
            vm.bVideoInfo = r.bVideoInfo;

            $("#articleImgUrl").attr("src", vm.bVideoInfo.articleImgUrl);

            $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);

            $("#brandName").val(vm.bVideoInfo.brandName);

            $("#articleTypeName").val(vm.bVideoInfo.articleTypeName);
            if (null != r.bVideoInfo.headlineTitleIds) {
                $(r.bVideoInfo.headlineTitleIds.split(",")).each(function (i, dom) {
                    console.log(dom);
                    $(":checkbox[value='" + dom + "']").prop("checked", true);
                });
            }
        })
    }

    function upload(file, pathname) {
        console.log(file);
        var bucketName = 'zktuistatic';
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: bucketName
        });
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath = yeaer + "" + month + "" + day;
        var key = "";
        var exName = getFileExtendingName(file.name);
        key = pathname + "/" + datePath + "/" + guid() + exName;
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            var rootUrl = "http://zktfile.wxslzf.com/";
            console.log(ret.res);
            if (ret.res.status == 200 && ret.res.statusCode == 200) {
                if (pathname == 'ps') {

                    if (vm.bVideoInfo.articleImgUrl != null && vm.bVideoInfo.articleImgUrl != '') {
                        var objName = vm.bVideoInfo.articleImgUrl.replace(rootUrl, "");
                        if (objName != null && objName != '') {
                            client.delete(objName);
                        }
                    }

                    vm.bVideoInfo.articleImgUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                    $("#articleImgUrl").attr("src", vm.bVideoInfo.articleImgUrl);
                } else if (pathname == 'video') {

                    if (vm.bVideoInfo.videoUrl != null && vm.bVideoInfo.videoUrl != '') {
                        var objName = vm.bVideoInfo.videoUrl.replace(rootUrl, "");
                        if (objName != null && objName != '') {
                            client.delete(objName);
                        }
                    }

                    vm.bVideoInfo.videoUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                    vm.bVideoInfo.videoFormat = exName;
                    vm.bVideoInfo.videoSize = ret.res.size;
                    $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);
                }
            }

        }).catch(function (err) {
            console.log(err);
        });
    }

    function inserttx(e, pathname) {
        var files = e.files;
        var length = files.length;
        console.log("选择了" + length + "张图片");
        upload(files[0], pathname);
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/bvideoinfo.js?_${.now?long}"></script>
<script>
    $("input[name='articleVersionNum'][value='2']").prop("checked", "checked");
    $("input[name='hotType'][value='0']").prop("checked", "checked");
</script>
</body>
</html>
